<template>
    <div class="awards-box w1200" v-loading="loading"> 
      <h1 style="text-align: center;font-size: 24px;margin: 30px 0;">获奖作品</h1>
      <!-- v-if='(dataList.length || 0) >0' -->
      <div class="content-box clearfix"  v-if='dataList.length >0'>
        <div class="one ">
          <div class="head">
              —— <span>一等奖</span> ——
          </div>
          <h1 style="color:#3246c4;font-weight: 600;margin:10px;">参赛视频</h1>
          <div class="content">
            <div class="left">
              <div  @click='showVideo(dataList[0].videoUrl)' >
                <img src="../../assets/images/video.jpg" alt="">
              </div>
              <!-- <video src="movie.ogg" controls="controls">
                您的浏览器不支持 video 标签。
              </video> -->
              <el-dialog
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
                <video :src="vUrl" controls="controls" width="100%" v-if='dialogVisible'>
                  您的浏览器不支持 video 标签。
                </video>
              </el-dialog>
            </div>
            <div class="right">
              <p style="margin-bottom:25px;">
                <span style="color:#555555;">编号：</span> <span style="color:#888;">{{dataList[0].orderNum | returnIndex}}</span>
              </p>
              <!-- <div><img src="../../assets/images/dwmc.png" alt=""><span>队伍名称：<em class="grey">{{items.teamName | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/csdw.png" alt=""><span>参赛单位：<em class="grey">{{items.participatingUnits | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/tdcy.png" alt=""><span>团队成员：<em class="grey">{{str | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/cstm.png" alt=""><span>赛题名称：<em class="grey">{{items.worksName | stringLengthWork}}</em></span></div> -->
              <div class="msg-box">
                <div><img src="../../assets/images/xm.png" alt=""><span>队伍名称：</span><span style="color:#ccc;">{{dataList[0].teamName | stringLengthWork}}</span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>参赛单位：<span style="color:#ccc;">{{dataList[0].participatingUnits | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>团队成员：<span style="color:#ccc;">{{dataList[0].teamMember | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>作品名称：<span style="color:#ccc;">{{dataList[0].worksName | stringLengthWork}}</span></span></div>
              </div>
              <div class="text-box">
                <div v-html='dataList[0].context'></div>
              </div>
            </div>
          </div>
        </div>
        <div class="twoAndThree">
          <div class="left">
            <div class="head">
                —— <span>二等奖</span> ——
            </div>
            <div class="content" @click='entriesdetails("汪教授")' v-if='dataList.length>1'>
              <div class="content-img-box">
                    <img :src="dataList[1].articleImg" alt="">
                    <div>
                      {{dataList[1].orderNum | returnIndex}}
                    </div>
                  </div>
              <div class="msg-box">
                <div><img src="../../assets/images/xm.png" alt=""><span>队伍名称：</span><span style="color:#ccc;">{{dataList[1].teamName | stringLengthWork}}</span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>参赛单位：<span style="color:#ccc;">{{dataList[1].participatingUnits | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>团队成员：<span style="color:#ccc;">{{dataList[1].teamMember | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>作品名称：<span style="color:#ccc;">{{dataList[1].worksName | stringLengthWork}}</span></span></div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="head">
                —— <span>三等奖</span> ——
            </div>
            <div class="content" @click='entriesdetails("汪教授")' v-if='dataList.length>2'>
              <div class="content-img-box">
                    <img :src="dataList[2].articleImg" alt="">
                    <div>
                     {{dataList[2].orderNum | returnIndex}}
                    </div>
                  </div>
              <div class="msg-box">
                 <div><img src="../../assets/images/xm.png" alt=""><span>队伍名称：</span><span style="color:#ccc;">{{dataList[2].teamName | stringLengthWork}}</span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>参赛单位：<span style="color:#ccc;">{{dataList[2].participatingUnits | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>团队成员：<span style="color:#ccc;">{{dataList[2].teamMember | stringLengthWork}}</span></span></div>
                <div><img src="../../assets/images/xm.png" alt=""><span>作品名称：<span style="color:#ccc;">{{dataList[2].worksName | stringLengthWork}}</span></span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
           
<script>
export default{
  data() {
    return {
      dialogVisible: false,
      dataList:[],
      vUrl:'',
      loading:true
    }
  },
  // props:{
  //   pData:Array
  // },
  // watch:{
  //   pData:{
  //     handler(nv,ov){
  //       this.dataList = nv
  //     },
  //     deep:true,
  //     immediate:true,
  //   }
  // },
  methods: {
    handleClose(done) {
        this.$confirm('确认关闭视频？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      showVideo(url){
        this.dialogVisible=!this.dialogVisible
        this.vUrl = url
      },
      entriesdetails(item){
        this.$store.commit('showDetail',true)
        this.$store.commit('setDetailName',item)
      },
      async getVictoryWorksList(){
        this.loading = true
        let {rows:res} = await this.API.getVictoryWorksList()
        this.dataList = res
        this.loading = false
      }

  },
  mounted() {
    this.getVictoryWorksList()
  },
}
</script>
<style lang='scss' scoped>
  .awards-box{
    .content-box{
      .one{
          overflow: hidden;
        .head{
          height: 50px;
          width: 100%;
          background-color: #3246c4;
          color: #fff;
          line-height: 50px;
          text-align: center;
          span{
            margin: 0 15px;
          }
        }
        .content{
          // display: flex;
          // flex: 8;
          .left{
            // flex: 3;
            float: left;
            width: 425px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .right{
            // flex:5;
            float: left;
            margin-left: 50px;
            .msg-box{
              border-bottom: 1px solid #ccc;
              padding-bottom: 15px;
              &>div{
                display: flex;
                align-items: center;
                padding: 10px 0;
                img{
                  width: 16px;
                  margin-right: 10px;
                  margin-left: 5px;
                }
              }
            }
            .text-box{
              color: #ccc;
              p{
                line-height: 30px;
              }
            }
          }
        }
      }
      .twoAndThree{
        // display: flex;
        margin: 30px 0;
        .head{
          height: 50px;
          width: 100%;
          background-color: #3246c4;
          color: #fff;
          line-height: 50px;
          text-align: center;
          
          span{
            margin: 0 15px;
          }
        }
        .content{
          width: 300px;
          // position: absolute;
          // left: 50%;
          // transform: translateX(-50%);
          margin: 50px auto;
          border-bottom: 2px solid #ccc;
          padding-bottom: 10px;
          .content-img-box{
                    width: 100%;
                    position: relative;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                    div{
                      position: absolute;
                      top: 0;
                      left: 0;
                      background-color: #3246c4;
                      color: #fff;
                      padding: 15px 25px;
                    }
                  }
                    .msg-box{
                      &>div{
                        display: flex;
                        align-items: center;
                        padding: 10px 0;
                        img{
                          width: 16px;
                          margin-right: 10px;
                          margin-left: 5px;
                          vertical-align: middle;
                        }
                      }
                    }
        }
        .content:hover{
          border-bottom: 2px solid #3246c4;
          transform: translate(2px,-2px);
          box-shadow: -4px 9px 20px 2px rgba(0,0,0,0.3);
          transition: all .2s;
          .msg-box-h1{
            color: #3246c4;
          }
        }
        .left{
          float: left;
          width: 585px;
          // position: relative;
          // overflow: hidden;
        }
        .right{
          float: left;
          width: 585px;
          margin-left: 25px;
          // position: relative;
          // overflow: hidden;
        }
      }
    }
  }
            
</style>